/* 动作控制面板样式 - 使用CSS变量支持主题切换 */
.action-controller {
  position: absolute;
  left: 20px; /* 从40px调整到20px，往左移动 */
  top: 35%;
  transform: translateY(-50%);
  z-index: 30;
  background: var(--panel-bg); /* 使用CSS变量，支持主题切换 */
  backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border); /* 使用CSS变量，支持主题切换 */
  border-radius: 15px;
  padding: 15px;
  min-width: 180px;
  box-shadow: var(--panel-shadow); /* 使用CSS变量，支持主题切换 */
  pointer-events: auto; /* 确保面板可以接收鼠标事件 */
}

/* 选择器样式 - 使用CSS变量支持主题切换 */
.action-selector {
  width: 100%;
  padding: 12px 16px;
  background: var(--select-bg); /* 使用CSS变量，支持主题切换 */
  border: 1px solid var(--select-border); /* 使用CSS变量，支持主题切换 */
  border-radius: 8px;
  color: var(--text-primary); /* 使用CSS变量，支持主题切换 */
  font-size: 16px;
  outline: none;
  cursor: pointer;
  transition: none; /* 移除所有过渡动画 */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.action-selector:hover {
  background: var(--select-hover-bg); /* 使用CSS变量，支持主题切换 */
  border-color: var(--select-hover-border); /* 使用CSS变量，支持主题切换 */
  transition: none; /* 移除悬停动画 */
}

.action-selector:focus {
  border-color: var(--select-focus-border); /* 使用CSS变量，支持主题切换 */
  box-shadow: var(--select-focus-shadow); /* 使用CSS变量，支持主题切换 */
  transition: none; /* 移除焦点动画 */
}

/* 选项样式 - 使用CSS变量支持主题切换 */
.action-selector option {
  background: var(--select-option-bg); /* 使用CSS变量，支持主题切换 */
  color: var(--text-primary); /* 使用CSS变量，支持主题切换 */
  padding: 8px 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .action-controller {
    left: 20px;
    min-width: 150px;
    padding: 15px;
  }
  
  .controller-title {
    font-size: 14px;
  }
}
